<template>
    <div class="sidebar">
      <el-menu
        mode="vertical"
        class="sidebar"
        :show-timeout="200"
        background-color="#F7F7F7"
        text-color="#CCCCCC"
        active-text-color="#000000"
        :default-active="activeIndex"
        @select="handleSelect"
      >
        <template v-for="item in items" >
            <el-menu-item :index="item.index" >
              <i :class="item.icon"></i>
              <span slot="title">{{item.name}}</span>
            </el-menu-item>
        </template>
      </el-menu>
    </div>
</template>

<script>
export default {
  name: 'SimpleSidebar',
  props: {
    data: {
      type: [Array],
      default() {
        return [{}]
      }
    }
  },
  data() {
    return {
      items: this.data,
      activeIndex: this.data[0].index
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      const $this = this
      $this.data.forEach(function(d, i) {
        if (key === d.index) {
          $this.$router.push(d.path)
          return
        }
      })
    }
  }
}
</script>

<style scoped>
    .sidebar{
       height: 100%;
    }
</style>
